<template>
	<view class="information">
		<view class="contain">
			<view class="contain-first" v-for="(item) in inf" :key="item.id" @click="go(item.url)">
				<view>
					<image mode="widthFix" :src="item.img"></image>
				</view>
				<view>
					<text>{{item.name}}</text>
					<view>
						<text>{{item.active}}</text>
						<text v-if="item.name=='系统通知'&&xitonglength>0" style="color: #ff4658;">
							你有{{xitonglength}}条消息
						</text>
						
						<text v-else-if="item.name=='我的关注'&&usertells>0" style="color: #ff4658;">
							你有{{usertells}}条消息
						</text>
						<text v-else>暂无消息</text>
					</view>
				</view>
				<view>
					<text>{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  createNamespacedHelpers
	 } from 'vuex';
	 const {
	  mapActions,
	  mapState
	 } = createNamespacedHelpers('message');
	export default {
		async onLoad(){
			await this.getAllShowAnnouncement({announcementStatus:0})
			this.xitonglength=this.xitongtells.length
			const time=this.xitongTime
			this.inf[0].time=time
			const data=await this.getMessageListByStatus({messageStatus:0})
			this.usertells=data.data.length
			console.log("adsad",data)
		},
		data() {
			return {
				inf:[
					{id:1,name:"系统通知",img:"../../static/iamges/zu906@2x.png",time:"09:22",active:"",url:"/pages/xitongtell/xitongtell"},
					{id:2,name:"账户通知",img:"../../static/iamges/zu905@2x.png",time:"昨天",active:"健康金领取提醒",url:"/pages/serveRemind/serveRemind"},
					{id:3,name:"精彩活动",img:"../../static/iamges/zu904@2x.png",time:"",active:""},
					{id:4,name:"我的关注",img:"../../static/iamges/zu903@2x.png",time:"07:41",active:"",url:"/pages/usertells/usertells"},
					{id:5,name:"互动消息",img:"../../static/iamges/zu902@2x.png",time:"昨天",active:"打招呼消息"}
				],
				xitonglength:"0",//系统未读消息
				usertells:"0",//用户接受到的消息
			}
		},
		computed:{
			...mapState(['xitongtells','xitongTime'])
		},
		methods: {
			...mapActions(['getAllShowAnnouncement','getMessageListByStatus','updateAllAnnouncementStatus']),
			 go(url){
				uni.navigateTo({
					url
				})
				if(url=="/pages/usertells/usertells"){
                  // await this.updateAllAnnouncementStatus()
				   // const data=await this.getMessageListByStatus({messageStatus:0})
				   // this.usertells=data.data.length
				}
			},
			//下拉刷新
		async	onPullDownRefresh() {
				console.log('refresh');
				await this.getAllShowAnnouncement({announcementStatus:0})
				this.xitonglength=this.xitongtells.length
				const time=this.xitongTime
				this.inf[0].time=time
				const data=await this.getMessageListByStatus({messageStatus:0})
				this.usertells=data.data.length
				console.log("adsad",data)
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			}
		},
	}
</script>

<style lang="scss" scoped>
.information{
	width: 100vw;
	height:100vh;
	background-color: #fafafa;
	.contain{
		width:100%;
		background-color: white;
		.contain-first{
			display:flex;
			width:100%;
			justify-content: space-around;
			margin-top: 40rpx;
			view:first-child{
				width:100rpx;
				height:100rpx;
				image{
					width:100%;
				}
			}
			>view:nth-child(2){
				margin-top: 10rpx;
				text{
					font-size: 28rpx;
				}
				view{
					color:#dfdfdf;
				}
			}
			>view{
				width:33.3%;
				// flex-grow: 1;
				
			}
		   >view:last-child{
			   text-align: right;
			   color:#dfdfdf
		   }
		}
	}
}
</style>
